import { useEffect } from 'react';
import './zmd-two.scss'
import * as echarts from "echarts";


const App = () => {

    useEffect(() => {
        // 创建 ECharts 实例
        const myChart = echarts.init(document.getElementById('tto'));

        // 设置图表配置项
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 10
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold',
                            formatter: function (params) {
                                // 在这里自定义显示的内容
                                return params.name + ': ' + params.value;
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ],
        };

        // 使用配置项设置图表
        myChart.setOption(option);

        // 返回一个清理函数，用于在组件卸载时销毁图表实例
        return () => {
            myChart.dispose();
        };
    }, []); // 空的依赖数组确保 useEffect 只在组件挂载时运行一次

    return (
        <div>
            <div id='tto'></div>
        </div>
    );
}

export default App;
